<!--
 * @Descripttion: 库存查询列表
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-11 20:30:53
 -->
<template>
  <div class="app-container">
    <Tab
      v-model="currentIndex"
      @on-date-change="onDateChange"
    />
    <div>
      <el-card shadow="never" class="oper-btn-card">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="title bg-gay border-gay">
              <span>利润</span>
              <span class="color-red margin-l5">{{ profitAmount }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="title bg-gay border-gay">
              <span>收入</span>
              <span class="color-red margin-l5">{{ receAmount }}</span>
            </div>
            <vxe-grid
              ref="table"
              class="grid"
              border="inner"
              resizable
              highlight-hover-row
              :loading="tableLoading.rece"
              :columns="columnsDataRece"
              :data="tableData.rece"
            />
          </el-col>
          <el-col :span="8">
            <div class="title bg-gay border-gay">
              支出<span class="color-red margin-l5">{{ payAmount }}</span>
            </div>
            <vxe-grid
              ref="table"
              class="grid"
              border="inner"
              resizable
              highlight-hover-row
              :loading="tableLoading.pay"
              :edit-config="{trigger: 'click', mode: 'row'}"
              :columns="columnsDataPay"
              :data="tableData.pay"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { getRece, getPay } from '@/api/report/report-fin.js'
import Affix from '@/components/Affix'
import Tab from '@/views/components/Tab'

export default {
  name: 'ReportProfit',
  filters: {
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { Affix, Tab },
  mixins: [oftenuse],
  data() {
    return {
      searchData: { },
      currentIndex: 0,
      columnsDataRece: [
        { field: 'name', title: '收入项目', width: 200 },
        { field: 'value', title: '本期金额', align: 'right',
          slots: {
            default: ({ row }) => {
              const { value } = row
              const a = this.$amount(value).format()
              return [a]
            }
          }
        }
      ],
      columnsDataPay: [
        { field: 'name', title: '支出项目', width: 200 },
        { field: 'value', title: '本期金额', align: 'right',
          slots: {
            default: ({ row }) => {
              const { value } = row
              const a = this.$amount(value).format()
              return [a]
            }
          }
        }
      ]
    }
  },
  computed: {
    'receAmount': function() {
      const receTableData = this.getTableData('rece') || []
      let result = 0
      receTableData.forEach(item => {
        result = this.$amount(result).add(item.value).format()
      })
      return result
    },
    'payAmount': function() {
      const receTableData = this.getTableData('pay') || []
      let result = 0
      receTableData.forEach(item => {
        result = this.$amount(result).add(item.value).format()
      })
      return result
    },
    'profitAmount': function() {
      const receAmount = this.receAmount
      const payAmount = this.payAmount
      const value = this.$amount(receAmount).subtract(payAmount).format()
      return value
    }
  },
  watch: {
    'searchData.beginTime': {
      handler(val) {
        this.getListData()
      }
    }
  },
  created() {
    this.getListData()
  },
  methods: {
    btnExportData() {},
    btnFilter() {},
    btnSearch() {
      this.setBtnLoading('search', true)
      this.getListData().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    // api
    getListData(params = this.searchData) {
      this.getRece(params)
      this.getPay(params)
    },
    getRece(data) {
      this.setTableLoading('rece', true)
      getRece(data).then(res => {
        this.setTableLoading('rece', false)
        const data = res.data.data
        this.setTableData('rece', data)
      })
    },
    getPay(data) {
      this.setTableLoading('pay', true)
      getPay(data).then(res => {
        this.setTableLoading('pay', false)
        const data = res.data.data
        this.setTableData('pay', data)
      })
    },
    // on
    onDateChange(data) {
      console.log(data)
      if (data) {
        this.$set(this.searchData, 'beginTime', data.beginTime)
        this.$set(this.searchData, 'endTime', data.endTime)
      }
    }
  }
}
</script>
<style scoped>
  .title{
    height: 60px; line-height: 60px;
    text-align: center;
    font-size: 20px; font-weight: bold;
  }
</style>
